<script setup lang="ts">
import { Toast } from 'vant';
import { useRouter, RouterView } from 'vue-router'
import { ref, reactive, computed, watch, onMounted, onUnmounted, nextTick } from 'vue'
import { getRankSongListData, getHotTopicData, getHotSongListCategoryData, getRecommendSongListData } from '@/api/api'
import type { HotSongsCategoryListType, HotTopicListType, RecommendSongsType, RankSongListType } from '@/types'
import RankSongList from '../../components/SongList.vue'

const recommendSongList = ref<RecommendSongsType[]>([])
const hotTopicList = ref<HotTopicListType[]>([])
const hotSongsCategoryList = ref<HotSongsCategoryListType[]>([])
const rankSongList = ref<RankSongListType[]>([])
const pageDom = ref()
const active = ref(0);
const color = ref('#fff')
const navBarStyle = reactive({
    backgroundColor: '',
})
const pageStyle = reactive({
    backgroundImage: ''
})
const router = useRouter()
const props = defineProps({
    currentTime: Number,
    duration: Number,

})
onMounted(async () => {
    // 获取推荐歌单数据
    let { data: songsData } = await getRecommendSongListData()
    recommendSongList.value = songsData.result

    // 获取热门话题数据
    let { data: hotTopData } = await getHotTopicData()
    hotTopicList.value = hotTopData.hot

    // 获取音乐电台数据
    let { data: radioSongListData } = await getHotSongListCategoryData()
    hotSongsCategoryList.value = radioSongListData.tags
    // console.log(pageDom.value);

    // 获取榜单数据列表
    let { data: rankSongsData } = await getRankSongListData()
    rankSongList.value = rankSongsData.list
    // console.log(rankSongList.value);

    // 触发监听
    pageDom.value.addEventListener('scroll', scrollTop, true)


})

onUnmounted(() => {
    // 离开该页面需要移除这个监听的事件，不然会报错
    // pageDom.value.removeEventListener("scroll", scrollTop, true);
});
// 监听页面高度
const scrollTop = () => {
    let scroll = pageDom.value.scrollTop
    if (scroll >= 10) {
        navBarStyle.backgroundColor = `rgb(0,0,0)`
    } else if (scroll <= 46) {
        navBarStyle.backgroundColor = `transparent`
    }
    if (scroll >= 890) {
        color.value = `transparent`
    } else if (scroll < 890) {
        color.value = `#fff`
    }
    if (scroll >= 10) {
        pageStyle.backgroundImage = `linear-gradient(to bottom right, #000000, #000000)`
    } else if (scroll <= 46) {
        pageStyle.backgroundImage = `linear-gradient(to bottom right, #293d48, #000000)`
    }

}

// 处理音乐电台分类
const compHotSongsCategoryList = computed(() => {

    // 截取前六条音乐数据

    let filterHotSongsList = hotSongsCategoryList.value.splice(0, 6)
    // 字符串截取
    filterHotSongsList.map((item: HotSongsCategoryListType, index: number) => {
        if (index == 5) {
            item.name = item.name.slice(0, 2)
        }

    })
    return filterHotSongsList;
})

// 处理榜单列表
const compRankSongList = computed(() => {

    // 处理前三条排行榜单数据
    let filterRankSongList = rankSongList.value.splice(0, 3)

    return filterRankSongList
})

// 获取音乐电台详情歌曲
const getHotSongListDetailList = () => {
}

// 跳转去歌单详情页
const goToSongDetails = (id: number) => {

    router.push({
        path: '/songDetails',
        query: {
            id
        }
    })

}

// 跳转去搜索详情页
const goToSearchDetails = () => {
    router.push({
        path: '/searchDetails',

    })
}

// 热度过万处理
const filterHotTopic = (num: number) => {
    return num > 9999 ? (num / 10000).toFixed(1) + '万' : num
}
</script>
<template >
    <div class="home-container" ref="pageDom" :style="pageStyle">
        <!-- navbar标签栏 -->
        <van-nav-bar left-text="发现" :border="false" fixed :style="navBarStyle">
            <template #right>
                <i @click="goToSearchDetails" class="icon-search"></i>
            </template>
        </van-nav-bar>
        <!-- 音乐电台 -->
        <div v-if="hotSongsCategoryList.length">
            <div class="radio-title">音乐电台</div>
            <div class="radio-container">
                <div class="radio-list">
                    <div class="radio-item" v-for="item in compHotSongsCategoryList" :key="item.id">
                        <span class="pub">{{ item.name }}</span>
                    </div>

                </div>
            </div>
        </div>

        <!-- 热门话题 -->
        <div class="hot-topic-title" v-if="hotTopicList.length">
            <p>热门话题</p>
            <!-- <van-icon name="arrow" /> -->
        </div>
        <div class="hot-topic-container" v-if="hotTopicList.length">
            <div class="hot-topic-list">
                <div class="hot-topic-item" v-for="item in hotTopicList" :key="item.actId">
                    <!-- <img class="img" :src="item.sharePicUrl"> -->
                    <div class="content">
                        <div class="title">
                            <i class="icon-topic"></i>
                            <span>{{ item.title }}</span>
                        </div>
                    </div>
                    <div class="heat">{{ filterHotTopic(item.participateCount) }}热度</div>

                    <div class="text">
                        <img :src="item.sharePicUrl">
                    </div>
                    <div class="pub">
                        <div class="van-multi-ellipsis--l2">
                            {{ item.text[0] }}
                        </div>
                    </div>

                </div>

            </div>
        </div>
        <!-- 歌单推荐 -->
        <div class="songs-title" v-if="recommendSongList.length">
            <p>歌单推荐</p>
            <van-icon name="arrow" />
        </div>
        <div class="songs-recommend" v-if="recommendSongList.length">
            <div class="list">
                <div class="songs-list" @click="goToSongDetails(item.id)" v-for="item in recommendSongList"
                    :key="item.id">
                    <img :src="item.picUrl">
                    <div class="van-multi-ellipsis--l2">
                        {{ item.name }}
                    </div>
                </div>

            </div>

        </div>

        <!-- 榜单列表 -->
        <div class="rank-list" v-if="rankSongList.length">
            <van-tabs v-model:active="active" title-active-color="#fff" swipeable sticky>
                <van-tab v-for="item in compRankSongList" :title="item?.name">
                    <keep-alive>
                        <RankSongList :currentTime="props.currentTime" :rankId="item?.id" :title="item?.name">
                        </RankSongList>
                    </keep-alive>
                </van-tab>
            </van-tabs>
        </div>

    </div>
    <van-loading v-if="!rankSongList.length && !rankSongList.length && !rankSongList.length" vertical type="circular"
        color="#fff" />
</template>
<style lang="scss">
.home-container {
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    margin-bottom: 50px;
    padding: 46px 0 0;
    width: 100vw;
    height: 100vh;
    background-image: linear-gradient(to bottom right, #293d48, #000000);
    overflow-y: auto;

    .van-nav-bar {
        background: transparent;

        .van-nav-bar__text {
            font-size: 18px;
            color: v-bind(color);

        }

        .icon-search {
            width: 26px;
            height: 26px;
            background-image: url('../../assets/imgs/search/search.png');
            background-repeat: no-repeat;
            background-size: cover;
        }
    }

    .radio-title {
        margin: 16px 16px;
        color: #fff;

    }

    .radio-container {
        width: calc(100% - 32px);
        margin: 0 16px;
        overflow-x: auto;

        .radio-list {
            display: flex;
            justify-content: space-between;
            flex-wrap: wrap;
            width: 400px;

            .radio-item {
                position: relative;
                width: 125px;
                height: 80px;
                border-radius: 5px;
                color: black;

                .pub {
                    position: absolute;
                    top: 10px;
                    left: 10px;
                    font-size: 14px;
                    color: #fff;
                }

                &:nth-of-type(1),
                &:nth-of-type(2),
                &:nth-of-type(3),
                &:nth-of-type(4),
                &:nth-of-type(5),
                &:nth-of-type(6) {
                    margin-bottom: 15px;
                    background: #4f7d94;
                    overflow: hidden;

                    &::after {
                        content: "";
                        position: absolute;
                        right: -16px;
                        bottom: -10px;
                        display: block;
                        width: 70px;
                        height: 70px;
                        transform: rotate(30deg);
                        background-image: url('@/assets/imgs/ballad.jpg');
                        background-repeat: no-repeat;
                        background-size: cover;
                    }

                }

                &:nth-of-type(2) {
                    margin-bottom: 0;
                    background: #863e41;

                    &::after {
                        background-image: url('@/assets/imgs/rock.jpg');

                    }
                }

                &:nth-of-type(3) {
                    margin-bottom: 0;
                    background: #233064;

                    &::after {
                        background-image: url('@/assets/imgs/R&B.jpg');
                    }
                }

                &:nth-of-type(4) {
                    margin-bottom: 0;
                    background: #5b1987;

                    &::after {
                        background-image: url('@/assets/imgs/ele.jpg');
                    }
                }

                &:nth-of-type(5) {
                    margin-bottom: 0;
                    background: #3346bc;

                    &::after {
                        background-image: url('@/assets/imgs/O.jpg');

                    }
                }

                &:nth-of-type(6) {
                    margin-bottom: 0;
                    background: #a26755;

                    &::after {
                        background-image: url('@/assets/imgs/rap.jpg')
                    }
                }
            }
        }
    }

    .hot-topic-title {
        display: flex;
        justify-content: space-between;
        margin: 32px 16px 16px;
        font-size: 16px;
        color: #fff;
    }

    .hot-topic-container {
        width: calc(100% - 32px);
        margin: 0 16px 0;
        overflow-x: auto;

        .hot-topic-list {
            display: flex;
            width: 300%;

            .hot-topic-item {
                position: relative;
                width: 100%;
                height: 120px;
                border-radius: 5px;
                background-image: linear-gradient(#a87a7c, #c0a2a2);

                &:nth-of-type(2) {
                    // padding: 0 10px;
                    background-image: linear-gradient(#a7857c, #c0a2a2);
                }

                &:nth-of-type(3) {
                    background-image: linear-gradient(#a39d79, #b9b391);
                }

                .content {
                    position: absolute;
                    top: 15px;
                    left: 16px;
                    color: #fff;
                    box-sizing: border-box;

                    .title {
                        display: flex;
                        align-items: center;

                        .icon-topic {
                            display: inline-block;
                            width: 16px;
                            height: 16px;
                            background-image: url('../../assets/imgs/topic/topic.png');
                            background-repeat: no-repeat;
                            background-size: cover;
                            margin-right: 3px;
                        }
                    }

                }

                .heat {
                    position: absolute;
                    top: 35%;
                    left: 16px;
                    font-size: 12px;
                    color: #ccc;
                }

                .text {
                    position: absolute;
                    top: 45%;
                    right: 16px;
                    width: 50px;
                    height: 50px;
                    border-radius: 5px;
                    overflow: hidden;

                    img {
                        width: 50px;
                        height: 50px;
                    }
                }

                .pub {
                    position: absolute;
                    top: 60%;
                    left: 16px;
                    width: 250px;
                    font-size: 14px;
                    color: #ddd;
                }
            }
        }
    }

    .songs-title {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin: 32px 16px 16px;
        color: #fff;
        // background: #fff;
    }

    .songs-recommend {
        position: relative;
        display: flex;
        flex-direction: column;
        width: 100%;
        overflow-x: auto;
        color: #fff;

        .list {
            width: 250%;
            display: flex;
            justify-content: space-between;
            flex-wrap: wrap;
            padding: 0 16px;

            .songs-list {
                margin-bottom: 16px;
                width: 140px;
                font-size: 12px;

                img {
                    width: 100%;
                    height: 80%;
                    margin-bottom: 5px;
                    border-radius: 5px;
                }

                p {
                    padding: 5px 0;
                }
            }

        }


    }

    .rank-list {
        margin: 0 16px 0;
        color: #fff;

        .van-tab {
            padding: 0;
            justify-content: flex-start;
            font-size: 16px;
            letter-spacing: 1px;
        }

        .van-tabs__nav {
            height: 46px;

            background: none;

        }

        .van-tabs__line {
            background: none;

        }


    }
}

.van-loading {
    position: absolute;
    top: 45%;
    left: 50%;
}
</style>